<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>大虾技术博客「大虾技术博客」</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="Daheaths" />
<meta name="designer" content="Daheaths" />
<meta name="rating" content="general" /> 

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="robots" content="index, follow" />


<meta baidu-gxt-verify-token="2b74a5aea155a215abea8547f929190c" />


<!-- keywords -->
<meta name="keywords" content="全栈开发"/>
<!-- Canonical links -->
<link rel="canonical" href="http：www.vovteam.com/cates/HTMLCSS/index.html">

<!-- Alternative links -->


<!-- Icon -->

<link rel="icon" type="image/png" href="/img/favicon-16x16.png">


<meta name="msapplication-TileColor" content="#2f83cd">
<meta name="msapplication-TileImage" content="/img/mstile-144x144.png">

<!--open.weibo.com-->
<meta property="wb:webmaster" content="a1686eb81db284d5" />

<!--wechat shares meta-->


<!-- Prefetch -->










<!-- CSS -->
<link rel="stylesheet" href="/css/style.css">



<!-- RSS -->
<link rel="alternate" href="/atom.xml" title="大虾技术博客">
<!-- Open Graph -->
<meta name="description" content="不念过去，不畏将来！">
<meta name="keywords" content="全栈开发">
<meta property="og:type" content="website">
<meta property="og:title" content="大虾技术博客">
<meta property="og:url" content="http：www.vovteam.com/cates/HTMLCSS/index.html">
<meta property="og:site_name" content="大虾技术博客">
<meta property="og:description" content="不念过去，不畏将来！">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="大虾技术博客">
<meta name="twitter:description" content="不念过去，不畏将来！">
<meta name="twitter:site" content="Daheaths">

<script>
    var App = {
        root:'/',
        isHome: false,
        isCate: true,
        isTag: false  
    };
</script>



</head>
<body class="page-cate">

    
        <div class="mod-hd">
    <div class="grid">
        <!--导航栏Mobile start-->
        <span class="mod-hd-toggle" id="J_hdToggle"><i class="fa fa-bars"></i></span>
        <!--导航栏Mobile end-->
        <div class="mod-hd-main">
            <div class="mod-hd-inner">
                <nav class="mod-nav">
                    <ul class="mod-nav-list">
                        <li class="main-nav-item"><a href="/index.html" class="main-nav-link">博文</a></li><li class="main-nav-item"><a target="_blank" href="https://github.com/" class="main-nav-link">github</a></li><li class="main-nav-item"><a href="/about/" class="main-nav-link">关于</a></li>
                    </ul>
                </nav>
              <!--  <div class="mod-search" id="J_search">
                    <a class="mod-search-ico" id="J_searchTrigger" title="搜索">
                        <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                        <svg t="1498465834396" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M400.085333 753.265778c-192.128 0-348.444444-156.302222-348.444444-348.430222 0-192.142222 156.316444-348.444444 348.444444-348.444444 192.142222 0 348.444444 156.302222 348.444444 348.444444C748.544 596.963556 592.241778 753.265778 400.085333 753.265778zM400.085333 113.28c-160.768 0-291.555556 130.787556-291.555556 291.555556s130.787556 291.541333 291.555556 291.541333c160.753778 0 291.555556-130.773333 291.555556-291.541333S560.853333 113.28 400.085333 113.28z" p-id="3157" fill="#B5B5B5"></path><path d="M194.104889 296.974222c-2.474667 0-4.977778-0.64-7.253333-2.005333-6.755556-3.996444-8.974222-12.743111-4.963556-19.484444 45.525333-76.657778 129.137778-124.273778 218.197333-124.273778 7.864889 0 14.222222 6.357333 14.222222 14.222222s-6.357333 14.222222-14.222222 14.222222c-79.075556 0-153.301333 42.296889-193.735111 110.364444C203.690667 294.499556 198.968889 296.974222 194.104889 296.974222z" p-id="3158" fill="#B5B5B5"></path><path d="M160.682667 410.723556c-7.850667 0-14.222222-6.357333-14.222222-14.222222 0-20.195556 2.403556-31.445333 6.656-49.592889 1.792-7.651556 9.443556-12.373333 17.080889-10.609778 7.651556 1.792 12.401778 9.429333 10.609778 17.080889-3.982222 17.038222-5.902222 25.984-5.902222 43.121778C174.904889 404.366222 168.547556 410.723556 160.682667 410.723556z" p-id="3159" fill="#B5B5B5"></path><path d="M887.04 967.608889c-22.812444 0-44.216889-8.860444-60.359111-24.974222L597.12 713.045333c-17.806222-17.806222-23.665778-39.808-16.526222-61.966222 5.831111-18.033778 19.498667-33.251556 30.748444-44.472889 16.668444-16.668444 37.162667-33.720889 62.890667-33.720889 10.965333 0 27.448889 3.384889 43.562667 19.498667l229.589333 229.560889c16.113778 16.142222 24.974222 37.560889 24.974222 60.359111 0 22.784-8.860444 44.216889-24.974222 60.330667C931.242667 958.748444 909.824 967.608889 887.04 967.608889zM634.510222 669.525333c0.085333 0 0.839111 1.336889 2.830222 3.299556l229.560889 229.589333c10.752 10.723556 29.496889 10.723556 40.248889 0 5.361778-5.390222 8.305778-12.529778 8.305778-20.110222 0-7.608889-2.944-14.748444-8.334222-20.138667L677.575111 632.604444c-2.033778-2.033778-3.356444-2.773333-3.726222-2.887111-0.199111 0.113778-6.058667 0.867556-22.272 17.109333C635.320889 663.054222 634.538667 668.913778 634.510222 669.525333L634.510222 669.525333z" p-id="3160" fill="#B5B5B5"></path></svg>
                    </a>
                    <form id="J_searchForm" method="get" class="mod-search-form" action="/search/">
                        <input type="text" name="query" class="mod-search-ipt" id="J_searchInput" placeholder="搜索" />
                    </form>
                </div> -->
            </div>
        </div>
    </div>
</div>

    

	
    <div class="mod-container">
    <div class="grid">
        <div class="mod-main">
            

<div class="posts-wrap">
    <nav class="cates">
      <ul><li class="cate-menu-item"><a href="/index.html" class="cate-menu-link">全部文章</a></li><li class="cate-menu-item"><a href="/cates/HTML&CSS/index.html" class="cate-menu-link">HTML&CSS</a></li><li class="cate-menu-item"><a href="/cates/Javascript/index.html" class="cate-menu-link">Javascript</a></li><li class="cate-menu-item"><a href="/cates/Vue/index.html" class="cate-menu-link">Vue</a></li><li class="cate-menu-item"><a href="/cates/React&React Natice/index.html" class="cate-menu-link">React&React Natice</a></li><li class="cate-menu-item"><a href="/cates/移动开发/index.html" class="cate-menu-link">移动开发</a></li><li class="cate-menu-item"><a href="/cates/NodeJS/index.html" class="cate-menu-link">NodeJS</a></li><li class="cate-menu-item"><a href="/cates/性能/index.html" class="cate-menu-link">性能</a></li><li class="cate-menu-item"><a href="/cates/项目总结/index.html" class="cate-menu-link">项目总结</a></li><li class="cate-menu-item"><a href="/cates/视觉设计/index.html" class="cate-menu-link">视觉设计</a></li><li class="cate-menu-item"><a href="/cates/开发资源/index.html" class="cate-menu-link">开发资源</a></li><li class="cate-menu-item"><a href="/cates/运维/index.html" class="cate-menu-link">运维</a></li></ul>
    </nav>
    <div class="posts" id="posts">
      
        
          
          <article class="mod-post" itemscope itemtype="http://schema.org/Article">
    <a href="/2017/08/26/2016-5-4-Audio-之深入理解/" itemprop="url" title="Audio 之深入理解(上)">
        <div class="mod-post-cover" itemscope itemtype="http://schema.org/ImageObject">
            <img src="/img/post/img/audioone.jpg" alt="Audio 之深入理解(上)" itemprop="contentUrl"/>
        </div>
        <div class="mod-post-info">
            <h3 class="mod-post-tit" itemprop="name headline">Audio 之深入理解(上)</h3>
            <p class="mod-post-desc" itemprop="about">HTML5 的新属性，Audio 是用来播放音频文件，也可以与弹幕、游戏配合，开发出好玩的音乐站</p>
        </div>
    </a>
</article>
        
      
    </div>
    

</div>

        </div>
    </div>
</div>



    
       <div class="mod-backtop" id="backTop"><i class="fa fa-long-arrow-up"></i></div>
    

    
    
        <footer class="mod-ft" id="footer">
    <div class="grid">
            <div class="mod-ft-sec mod-ft-copyright">
                <p>Copyright &copy; 2017. All Rights Reserved.</p>
            </div>

            

        </div>
</footer>

<!-- Scripts -->
<!-- build:js /js/bundle/core.js -->
<script src="/js/libs/debounce.js"></script>
<script src="/js/libs/jquery.js"></script>
<script src="/js/libs/jquery.scrollPager.js"></script>
<script src="/js/libs/hogan-3.0.2.js"></script>
<script src="/js/libs/base64.js"></script>
<script src="/js/libs/gitment.browser.js"></script>
<script src="/js/mods/util.js"></script>
<script src="/js/mods/common.js"></script>
<script src="/js/mods/console.js"></script>
<script src="/js/mods/scrollPager.js"></script>
<script src="/js/mods/jweixin-1.0.0.js"></script>
<!-- endbuild -->

    
    
<script id="J_postTpl" type="text/template">
    {{#data}}
    <article class="mod-post">
        <a href="{{ url }}">
            <div class="mod-post-cover">
                <img src="{{ cover }}" alt="{{ title }}" />
            </div>
            <div class="mod-post-info">
                <h3 class="mod-post-tit">{{ title }}</h3>
                <p class="mod-post-desc">{{ desc }}</p>
            </div>
        </a>
    </article>
    {{/data}}
</script>

<img src="http://img1.imgtn.bdimg.com/it/u=2116970389,2689661422&amp;fm=28&amp;gp=0.jpg">


    

    
        




<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>




<script type="text/javascript" src="https://tajs.qq.com/stats?sId=53685723" charset="UTF-8"></script>



<script>
    (function(h,g,c,e,f,d,b){h.alogObjectName=f;h[f]=h[f]||function(){(h[f].q=h[f].q||[]).push(arguments)};h[f].l=1*new Date();d=g.createElement(c),b=g.getElementsByTagName(c)[0];d.async=1;d.src=e;b.parentNode.insertBefore(d,b)})(window,document,"script","//wqs.jd.com/promote/quark/atlogs.2.0.min.js","ATlog");
    ATlog("init","aotu-blog-aotu.io-011",false,true,true);
</script>




    


</body>
</html>
